<template>
  <div class="">
    <el-carousel height="801px" direction="vertical">
      <el-carousel-item v-for="image in image" :key="image">
        <img :src="image" alt="" class="image" />
      </el-carousel-item>
            <div class="dl"><slot></slot></div>
    </el-carousel>
  </div>
</template>

<script>
export default{
  components: {
  },
  data() {
    return {
      image: [
        "https://pic3.pocoimg.cn/image/poco/works/53/2018/0112/18/15157533377396957_64925705.jpg",
        "https://pic3.pocoimg.cn/image/poco/works/69/2018/0109/18/15154942829134973_178536587.jpg",
        "https://pic3.pocoimg.cn/image/poco/works/49/2018/0110/14/15155641055084729_178536587.jpg",
      ],
    };
  },
  methods: {},
};
</script>
<style lang='less'>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.dl {
  z-index: 100;
  position: absolute;
}
</style>